<!--  -->
<template>
  <div>
        <swiper
             :spaceBetween="0" 
             :centeredSlides="true" 
             :loop=true 
             :autoplay='{"delay": 2500,"disableOnInteraction": false}'
             :pagination='{"clickable": true}' 
             :navigation="true" class="mySwiper">
        <swiper-slide per-slide class="swiper-slide" v-for="item in banners">
           <a :href="item.link">
               <img :src="item.image" alt="" @load="imageLoad">
           </a>
       </swiper-slide>
      </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import '../../../node_modules/swiper/swiper.min.css'
import "../../../node_modules/swiper/components/pagination/pagination.min.css"
import SwiperCore, {Autoplay,Pagination,Navigation} from 'swiper';

SwiperCore.use([Autoplay,Pagination,Navigation]);
export default {
  data () {
    return {
      isLoad:false
    }
  },
  components:{
    Swiper,
    SwiperSlide
  },
  props:{
    banners:{
      type: Array,
      default() {
        return []
      }
    }
  },
  methods:{
    imageLoad() {
      if(!this.isLoad){
        this.$emit('imageLoad')
        this.isLoad = true
      }
      
    }
  }
}
</script>

<style  scoped>
  .mySwiper{
    width: 100%;
    height: 100%;
  }
  .swiper-slide img{
    width: 100%;
  }
</style>
